import React from "react"
import styles from "./index.module.css"
import { MyTable } from "@/components"
import { fetchList, delObj } from "@/api/admin/dict"
import { Space, Button, Input, Modal } from "antd"
import DictDetail from "./detail"
import ItemDetail from "./itemDetail"
import DictSelect from "@/components/dict-select"
import {
  EditOutlined,
  DeleteOutlined,
  AlignCenterOutlined,
} from "@ant-design/icons"

export default class DictContainer extends React.Component {
  columns = [
    {
      title: "序号",
      render: (text, record, index) => <span>{index + 1}</span>,
    },
    { title: "类型", dataIndex: "type" },
    { title: "描述", dataIndex: "description" },
    {
      title: "字典类型",
      dataIndex: "system",
      render: (text) => <span>{text === "1" ? "系统字典" : "业务字典"}</span>,
    },
    { title: "备注信息", dataIndex: "remarks" },
    { title: "创建时间", dataIndex: "createTime" },
    {
      title: "操作",
      render: (text, record) => (
        <Space>
          <Button
            icon={<EditOutlined />}
            type="primary"
            onClick={() =>
              this.setState({
                dictVisible: true,
                modalFlag: false,
                dict: record,
              })
            }
          >
            编辑
          </Button>
          <Button
            icon={<DeleteOutlined />}
            type="primary"
            danger
            onClick={() => this.delDict(record.id)}
          >
            删除
          </Button>
          <Button
            icon={<AlignCenterOutlined />}
            type="primary"
            onClick={() => {
              this.setState({
                dictItemVisible: true,
                selectId: record.id,
                type: record.type,
              })
            }}
          >
            字典项
          </Button>
        </Space>
      ),
    },
  ]
  componentDidMount() {
    this.getData()
  }
  state = {
    tableData: [],
    system: "", //字典类型
    type: "", //类型（唯一标识）
    dictVisible: false,
    dictItemVisible: false,
    modalFlag: true,
    dict: {
      type: "",
      description: "",
      system: "",
      remarks: "",
    },
  }
  getData(pageNo) {
    const { system, type } = this.state
    const params = {
      current: pageNo || 1,
      size: 10,
    }
    if (system) params.system = system
    if (type) params.type = type

    fetchList(params).then((res) => {
      this.setState({ tableData: res.data.data, dictVisible: false })
    })
  }
  addDict() {
    const { modalFlag } = this.state
    this.detail.addDict(modalFlag)
  }
  delDict(id) {
    Modal.confirm({
      title: "确定删除该条数据?",
      centered: true,
      onOk() {
        delObj(id).then(() => {
          this.getData()
        })
      },
    })
  }
  restFrom() {
    this.setState({
      dict: {
        type: undefined,
        description: undefined,
        system: undefined,
        remarks: undefined,
      },
    })
  }
  render() {
    const {
      tableData,
      dictVisible,
      modalFlag,
      dictItemVisible,
      selectId,
      dict,
      type,
    } = this.state
    return (
      <div className={styles.container}>
        <MyTable
          columns={this.columns}
          dataSource={tableData}
          onChange={(pageNo) => this.getData(pageNo)}
          handleAdd={() =>
            this.setState({ dictVisible: true, modalFlag: true })
          }
          tableHeader={
            <div className={styles.headTitle}>
              <span>类型：</span>
              <Input
                style={{ width: "210px", marginRight: "20px" }}
                allowClear
                onChange={(event) => {
                  this.setState({
                    type: event.target.value,
                  })
                }}
              />
              <span>字典类型：</span>
              <DictSelect
                allowClear
                style={{ width: "210px", marginRight: "20px" }}
                dictType="dict_type"
                onChange={(value) => {
                  this.setState({ system: value })
                }}
              ></DictSelect>
              <Space>
                <Button type="primary" onClick={() => this.getData(1)}>
                  搜索
                </Button>
              </Space>
            </div>
          }
        />
        {dictVisible && (
          <Modal
            title={modalFlag ? "新增" : "编辑"}
            visible={dictVisible}
            width={1000}
            onOk={this.addDict.bind(this)}
            onCancel={() => {
              this.setState({ dictVisible: false })
              this.restFrom()
            }}
            okText="保存"
            cancelText="取消"
          >
            <DictDetail
              getData={this.getData.bind(this)}
              dict={dict}
              ref={(ref) => {
                this.detail = ref
              }}
            />
          </Modal>
        )}
        {dictItemVisible && (
          <Modal
            title={"字典项管理"}
            visible={dictItemVisible}
            width={1500}
            footer={null}
            onCancel={() => this.setState({ dictItemVisible: false })}
          >
            <ItemDetail dictId={selectId} type={type} />
          </Modal>
        )}
      </div>
    )
  }
}
